<template>
	<view class="container">
		<view class="neiRong">
			<!-- 头部 -->
			<view class="header">
				<view class="avatar">					
					<image :src="order.user?.avatar_text" mode="aspectFit"></image>
				</view>
				<text class="title">{{order.user?.nickname}}</text>
				<text class="time">{{order.createtime_text}}</text>
				<view v-if="order.state == 0">
					<view class="status">
						<text>待支付</text>
					</view>
				</view>
				<view v-else-if="order.state == 1">
					<view class="status">
						<text>待帮助</text>
					</view>
				</view>
				<view v-else-if="order.state == 2">
					<view class="status2">
						<text>已接单</text>
					</view>
				</view>
				<view v-else-if="order.state == 3">
					<view class="status3">
						<text>已完成</text>
					</view>
				</view>
				<view v-else-if="order.state == 4">
					<view class="status3">
						<text>即将到达</text>
					</view>
				</view>
			</view>
			
			<!-- 快递详情 -->
			<view class="card">
				<view class="card-content">
					<view class="row">
						<text class="label">标题：</text>
						<text class="value">{{order.name}}</text>
					</view>
					<view class="row" v-if="order.num">
						<text class="label">快递数量：</text>
						<text class="value">{{order.num}}个</text>
					</view>
					<view class="row" v-if="order.price">
						<text class="label">金额：</text>
						<text class="value">{{order.price}}</text>
					</view>
					<view class="row" v-if="order.addprice">
						<text class="label">追加金额：</text>
						<text class="value">{{order.addprice}}</text>
					</view>
					<view class="row" v-if="order.endprice">
						<text class="label">实付金额：</text>
						<text class="value">{{order.endprice}}</text>
					</view>
					<view class="row" v-if="order.kdsj">
						<text class="label">快递商家：</text>
						<text class="value">{{order.kdsj}}</text>
					</view>
					<view class="row" v-if="order.qwsd">
						<text class="label">期望送达：</text>
						<text class="value">{{order.qwsd}}</text>
					</view>
				</view>
			</view>
			
			<view v-if="order.state == 3">
				<text style="color:#3c91ff;margin:20px;">订单已完成，相关信息已隐藏</text>
				<view class="flexRight">
					<button class="btn phone" @click="showServerPhone">
						<image src="/static/image/phone.png" class="phone-icon" />
					</button>
				</view>
			</view>
			<view v-else>
				<!-- 取件信息 -->
				<view class="card">
					<view class="address-box">
						<view class="address-item" v-if="order.pickadd">
							<text class="tag start">起</text>
							<text class="location">{{order.pickadd}}</text>
						</view>
						
						<view class="address-item" v-if="order.address">
							<text class="tag end">终</text>
							<text class="location">{{order.address}}</text>
						</view>
					</view>
				</view>
				
				<!-- 功能按钮 -->
				<view class="card">
					<view class="button-row">
						<view class="button-row">
							<button class="btn note" @tap="showOrderNote">订单备注</button>
							<button class="btn image" @tap="showImage">图片信息</button>
						</view>
						<button class="btn phone" @click="showServerPhone">
							<image src="/static/image/phone.png" class="phone-icon" />
						</button>
					</view>
				</view>
				<view class="countdown" v-if="order.state == 1 && order.time > 0">
					将于
					<text style="color:red;">
						<van-count-down :time="order.time" format="DD天HH时mm分ss秒" />
					</text> 
					后自动退款
				</view>				
				<view class="countdown" v-if="order.state==2 && order.time > 0">
					将于
					<text style="color:red;">
						<van-count-down :time="order.time" format="DD天HH时mm分ss秒" />
					</text> 
					后自动确认
				</view>
			</view>						
		</view>
		
		<view v-if="order.getuid">
			<!-- 订单信息标题 -->
			<view class="order-info-title">接单人信息</view>
			<view class="neiRong jieDan">
				<view class="jieDan">
					<view class="avatar">
						<image :src="order.getuser?.avatar_text" mode="aspectFit" />
					</view>
					<text class="title">{{order.getuser?.nickname}}</text>
					<text class="time"></text>
				</view>
				<button class="btn phone" @click="showReceiverPhone">
					<image src="/static/image/phone.png" class="phone-icon" />
				</button>
			</view>
		</view>
		<view v-else>
			<!-- 暂无接单人 -->
			<view class="no-receiver-text">暂无接单人</view>
		</view>
		
		<!-- 订单信息标题 -->
		<view class="order-info-title">订单信息</view>
		<!-- 订单信息内容 -->
		<view class="neiRong">
			<view class="order-info-container">
				<!-- 订单号 -->
				<view class="info-item">
					<text class="label">订单号</text>
					<view class="value-copy">
						<text class="value">{{order.repnum}}</text>
						<button class="copy-btn" @tap="copyOrderNumber">
							<image src="/static/image/xy.png" class="copy-icon" />
						</button>
					</view>
				</view>
			
				<!-- 支付时间 -->
				<view class="info-item" v-if="order.wxtime">
					<text class="label">支付时间</text>
					<text class="value">{{order.wxtime_text}}</text>
				</view>
				
				<view v-if="order.gettime">
					<!-- 接单时间 -->
					<view class="info-item">
						<text class="label">接单时间</text>
						<text class="value">{{order.gettime_text}}</text>
					</view>
				</view>
							
				<view v-if="order.updatetime">
					<!-- 完成时间 -->
					<view class="info-item">
						<text class="label">完成时间</text>
						<text class="value">{{order.updatetime_text}}</text>
					</view>
				</view>
				
				<!-- 联系管理员 -->
				<view class="info-item">
					<text class="label">联系管理员</text>
					<text class="value contact-admin" @click="contactAdmin">联系校区管理员</text>
				</view>
			</view>
			
		</view>
	</view>
	
	<!-- 底部操作按钮 -->
	<view class="footer">
		<view class="btnFather">
			<view style="width:150px" @click="toOrder">
				<button class="btn back" id="ddzx" >返回订单中心</button>
			</view>
			<view style="width:100px" 
				v-if="order.state == 1 && order.isEdit !=1 && order.dele==1"
				@click="orderOn(order.id)">
				<button class="btn confirm" id="jd">接单</button>
			</view>
		</view>
	</view>
	
	<van-dialog use-slot :show="!togs" @confirm="togs = true" :title="title">		
		<view class="dialog-content" 
			v-if="adminInfo.mobile && type==3">
			电话：{{adminInfo.mobile}}
		</view>
		<view v-else-if="order.images && type==2" class="dialog-content">
			<image style="width: 200rpx; height: 200rpx;" :src="order.images_text"></image>
		</view>
		<view v-else-if="order.need && type==1" class="dialog-content">
			需求：{{order.need}}
		</view>
		<view v-else-if="order.user?.mobile && type==4" class="dialog-content">
			电话：{{order.user?.mobile}}
		</view>
		<view v-else-if="order.getuser?.mobile && type==5" class="dialog-content">
			电话：{{order.getuser?.mobile}}
		</view>
		<view v-else class="dialog-content">
			无内容
		</view>
	</van-dialog>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getSetOrder,
		orderDetail,
		getLinkkf
	} from "@/api/index.js";
	
	const order = ref({});
	const togs = ref(true)
	const adminInfo = ref({})
	const type = ref()
	const title = ref('')
	
	onLoad((options) => {		
		getOrderDetail(options.id,options.typeid);
	})
	const getOrderDetail = (orderId,typeid) => {
		const datas = {
			depid: uni.getStorageSync("school_id"),
			id: orderId,
			typeid: typeid
		};
		orderDetail(datas).then(res => {
			order.value=res.data;
		})		
	}
	
	const showOrderNote = () => {
		togs.value = false
		type.value = 1
		title.value = "订单需求"
	}
	
	const showImage = () => {
		togs.value = false
		type.value = 2
		title.value = "图片信息"
	}
		
	/* 联系校区管理员 */
	const contactAdmin = async () => {
		let school_id = uni.getStorageSync("school_id")
		await getLinkkf({
			depid: school_id
		}).then(res => {
			if (res.code == 1) {
				togs.value = false
				adminInfo.value = res.data
				type.value = 3
				title.value = "联系校区管理员"
			}
	
		})
		return
	}
	
	const showServerPhone = () => {
		togs.value = false
		type.value = 4
		title.value = "发单人电话"
	}
	
	const showReceiverPhone = () => {
		togs.value = false
		type.value = 5
		title.value = "接单人电话"
	}
	
	//接单
	const orderOn = (orderId) => {
		getSetOrder({
			id: orderId
		}).then(res => {
			if (res.code == 1) {
				order.value.state = 2
				order.value.getisEdit = 2
			} else {
				if(res.code==20){
					uni.showToast({
						title: res.msg,
						duration: 1000,
					})
					
					setTimeout(function() {
						uni.navigateTo({
							url:'/package/pages/shimingrenzheng/shimingrenzheng'
						})
					}, 1100)
				}else if(res.code==30){
					uni.showToast({
						title: res.msg,
						duration: 1000,
					})
					setTimeout(function() {
						uni.navigateTo({
							url:'/package/pages/reqOrder/reqOrder'
						})
					}, 1100)
					
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
					})
				}
				
			}
		})
	}
	//返回订单中心
	const toOrder = () => {
		uni.switchTab({
			url:'/pages/order/order'
		})
	}
	// 复制订单号
	const copyOrderNumber = () => {
		let repnum=order.value.repnum
		uni.setClipboardData({
			data: repnum,
			success: () => {
				uni.showToast({
					title: '订单号已复制!',
					icon: 'none'
				});
			}
		});
	};
</script>

<style scoped>
	.flexRight {
		display: flex;
		justify-content: flex-end;
		padding: 10px;
	}
	
	.jieDan {
		display: flex;
		justify-content: space-between;
		padding: 5px;
		height: 50px;
	}
	
	.btnFather {
		display: flex;
	}
		
	/* 暂无接单人 */
	.no-receiver-text {
		font-size: 32rpx;
		color: #333;
		text-align: center;
		margin: 30rpx 0;
	}
	
	/* 订单信息标题 */
	.order-info-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 15px;
	}
	
	/* 订单信息容器 */
	.order-info-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 40rpx;
	}
	
	/* 信息项 */
	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.label {
		font-size: 28rpx;
		color: #666;
	}
	
	.value {
		font-size: 28rpx;
		color: #333;
	}
	
	.value-copy {
		display: flex;
		align-items: center;
	}
	
	.copy-btn {
		padding: 0;
		margin-left: 10rpx;
		height: 14px;
		width: 14px;
		border: 0px;
		border-radius: 0px;
	}
	
	.copy-icon {
		width: 100%;
		height: 100%;
		align-content: center;
		display: flex;
	}
	
	.contact-admin {
		color: #007aff;
	}
	
	/* 底部按钮 */		
	.footer .btn {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		border-radius: 8rpx;
		text-align: center;		
	}
	
	.footer .back {
		background: #fff;
		border: 1rpx solid #2bafffd4;
		color: #2bafffd4;
		border-radius: 25px;
		margin-right: 20rpx;
		font-size: 30rpx;
	}
	.neiRong {
		background-color: #fff;
		border-radius: 10px;
		margin: 10px;
		box-shadow: 0px -1px 2px 2px #eee;
	}
	
	.container {
		padding-bottom: 140rpx;
	}
	
	.header {
		padding: 24rpx 11rpx;
		position: relative;
		margin: 10px;
		border-radius: 6px;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
		float: left;
	}
	
	.avatar image {
		width: 100%;
		height: 100%;
	}
	
	.title {
		font-size: 30rpx;
		font-weight: 500;
		display: block;
	}
	
	.time {
		font-size: 24rpx;
		color: #999;
	}
	
	.status {
		position: absolute;
		right: 28rpx;
		top: 32rpx;
		background: #e1f3e8;
		color: #07c160;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}
	
	.status2 {
		position: absolute;
		right: 28rpx;
		top: 32rpx;
		background: #e9f7ff;
		color: #39a0ef;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}
	
	.status3 {
		position: absolute;
		right: 28rpx;
		top: 32rpx;
		background: #fff3ea;
		color: #f8ca12;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}
	
	.card {
		border-radius: 12rpx;
		padding: 0 28rpx;
	}
	
	.card-title {
		font-size: 32rpx;
		padding: 28rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.row {
		display: flex;
		justify-content: start;
		font-size: 28rpx;
		line-height: 48rpx;
	}
	
	.label {
		font-weight: bold;
		display: inline-block;
	}
	
	.value {
		word-break: break-all;
		display: inline;
	}
		
	.address-box {
		padding: 28rpx 0;
	}
	
	.address-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}
	
	.tag {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50px;
		text-align: center;
		line-height: 44rpx;
		margin-right: 20rpx;
		padding: 2px;
	}
	
	.start {
		background: #07c160;
		color: #fff;
	}
	
	.end {
		background: #1989fa;
		color: #fff;
	}
	
	.location {
		font-size: 28rpx;
	}
	
	.button-row {
		display: flex;
		justify-content: space-between;
		height: 62px;
	}
	
	.btn {
		border-radius: 8rp;
		height: 32px;		
		margin: 5px;
		line-height: 32px;
		font-size: 11px;
	}
	
	.note {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.image {
		background-color: #fffbe6;
		color: #faad14;
	}
	
	.phone {
		background-color: #e6f7ff;
		border-radius: 50%;
		width: 77rpx;
		height: 77rpx;
		margin: 0 20rpx;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.phone-icon {
		width: 100%;
		height: 100%;
	}
	
	.status-bar {
		margin: 20rpx;
		text-align: center;
	}
	
	.countdown {
		display: block;
		font-size: 26rpx;
		padding: 24rpx;
		border-radius: 8rpx;
	}
	
	.no-receiver {
		display: block;
		font-size: 26rpx;
		color: #999;
		margin-top: 20rpx;
	}
	
	.info-box {
		padding: 28rpx 0;
	}
	
	.info-row {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #666;
	}
	
	.info-row text:last-child {
		color: #333;
	}
	
	.contact-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0 0;
		margin-top: 28rpx;
		border-top: 1rpx solid #eee;
		color: #007aff;
	}
	
	.footer {
		font-size: 30rpx;
		position: fixed;
		bottom: 10px;
		width: 100%;
		right: 10px;
		display: flex;
		background-color: #fff;
		justify-content: flex-end;
		padding: 20px 0;									
	}			
	.footer .back {
		background: #fff;
		border: 1rpx solid #2bafffd4;
		color: #2bafffd4;
		border-radius: 25px;
		margin-right: 20rpx;
	}
	
	.footer .confirm {
		background: #3c91ff;
		color: #fff;
		border: none;
	}	
	.dialog-content{
		text-align: center;
		margin: 10px;
	}
</style>